<template>
  <div class="user-wrapper">
    <div class="content-box">
      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar class="avatar" :size="30" :src="avatar" />
          <span>{{ timeFix }}，{{ username }}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item style="flex: 1; width: 100%" key="0">
            <a
              style="flex: 1; width: 100%"
              href="javascript:;"
              @click="handleLogout"
            >
              <a-icon type="logout" />
              <span>退出登录</span>
            </a>
          </a-menu-item>
          <a-menu-item style="flex: 1; width: 100%" key="1">
            <a
              style="flex: 1; width: 100%"
              href="javascript:;"
              @click="settingPassword"
            >
              <a-icon type="setting" />
              <span>修改密码</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal
      :title="ModalTitle"
      v-if="visiblePassword"
      v-model="visiblePassword"
      :width="620"
      :centered="true"
      :maskClosable="false"
      @ok="handlePasswordOk"
      @cancel="handlePasswordCancel"
    >
      <div style="padding-left: 10px">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="用户名" prop="username">
            <a-input
              v-model="form.username"
              placeholder="请输入用户名"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item label="原密码" prop="password">
            <a-input
              v-model="form.password"
              placeholder="请输入原密码"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item label="新密码" prop="newPassword">
            <a-input
              v-model="form.newPassword"
              placeholder="请输入新密码"
              allowClear
            />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>
<script>
import NoticeIcon from "@/components/NoticeIcon";
import { mapActions, mapGetters, mapState } from "vuex";
import Vue from "vue";
import { ACCESS_TOKEN, USER_DATA, USER_RULE } from "@/store/mutation-types";
import { logout, setPassword } from "@/api/passport";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import { timeFix } from "@/utils/util";

export default {
  name: "UserMenu",
  data() {
    return {
      timeFix: timeFix(),
      isClick: true,
      visible: false,
      username: "",
      avatar: "",
      pid: "",

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visiblePassword: false,
      ModalTitle: "修改密码",
      form: {
        username: "",
        password: "",
        newPassword: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名!", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入原密码!", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码!", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    ...mapState({
      UserName: (state) => state.user.name,
    }),
    NoticeIcon,
  },
  mounted() {
    const user = Vue.ls.get(USER_DATA);
    if (this.username !== null) {
      this.username = user.name;
      this.avatar = user.headimg;
      this.pid = user.pid;
    } else {
      this.username = "亲，请重新登陆";
    }
  },
  methods: {
    // ...mapActions(['Logout']),
    // ...mapGetters(['nickname', 'avatar']),
    handleLogout() {
      const that = this;
      this.$confirm("真的要注销登录吗 ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // logout()
          //     .then(res => {
          //         if (res.data.code == 1) {
          //             showSuccess('退出成功');
          //             Vue.ls.remove(ACCESS_TOKEN);
          //             Vue.ls.remove(USER_DATA);
          //             Vue.ls.remove(USER_RULE);
          //             window.location.reload();
          //         } else if (res.data.code == -1 && res.data.msg == '无权限操作') {
          //             showSuccess('退出成功');
          //             Vue.ls.remove(ACCESS_TOKEN);
          //             Vue.ls.remove(USER_DATA);
          //             Vue.ls.remove(USER_RULE);
          //             window.location.reload();
          //         } else {
          //             showError(res.data.msg);
          //         }
          //     });
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              Math.random() > 0.5 ? resolve : reject;
              // Vue.ls.remove(ACCESS_TOKEN);
              Vue.ls.clear();
              window.location.reload();
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        })
        .catch(() => []);
    },

    // 修改密码
    settingPassword() {
      const that = this;
      const user = Vue.ls.get(USER_DATA);
      this.form.username = user.username;
      that.visiblePassword = true;
    },

    // 修改密码弹窗确认
    handlePasswordOk() {
      const that = this;
      that.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          let res = await setPassword(that.form);
          if (res.data.code == 0) {
            showSuccess("修改成功！");
            that.visiblePassword = false;
            that.handlePasswordCancel();
            that.$refs.ruleForm.resetFields();
          } else {
            showError(res.data.msg);
          }
        }
      });
    },

    // 修改密码弹窗取消
    handlePasswordCancel() {
      const that = this;
      that.form.username = "";
      that.form.password = "";
      that.form.newPassword = "";
    },
  },
};
</script>
<style lang="less" scoped>
</style>